<template>
    <div class="matchground">
        <div class="row">
            <div class="col-lg-4 col-sm-4 col-4">
                <div class="user_phote col-lg-8 col-sm-8 col-8 offset-2 offset-lg-2 offset-sm-2 ">
                    <img :src="$store.state.user.photo" class="img-fluid">
                </div>
                <div class="user_name">
                    <span>{{$store.state.user.username}}</span>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4 mid_text">
                <div class="col-lg-6 col-sm-12 col-12 offset-lg-3">
                    <select  v-model="select_bot" class="form-select">
                        <option selected value="-1">亲自出马</option>
                        <option v-for="bot in bots" :key="bot.id" :value="bot.id">
                            {{bot.title}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 col-4">
                <div class="user_phote col-lg-8 col-sm-8 col-8 offset-lg-2 offset-sm-2 offset-2">
                    <img :src="$store.state.pk.opponent_photo" class="img-fluid">
                </div>
                <div class="user_name">
                    <span>{{$store.state.pk.opponent_username}}</span>
                </div>
            </div>
            <div class="col-lg-12 col-sm-12 col-12 match_button">
                <button type="button" @click="status_change" :class="classes">{{match_status}}</button>
            </div>
        </div>
    </div>
    <div class="row introduce">
        <div class="card">
            <div class="card-body">
                <span style="font-weight: bold;">游戏介绍</span><br>
                <span>玩家可以选择人人对战,人机对战,AI对战。
                玩家可以控制键盘或按键来控制蛇的移动方向，若蛇碰撞到墙、对手的蛇或者自己的蛇身
                则判断为输,游戏结束,玩家可以通过编辑代码来创建自己的BotSnake,对战可以派出Bot出战,
                不需要玩家控制</span><br>
                <span style="font-weight: bold;">PC端:W、A、S、D为上下左右四个方向</span><br>
                <span style="font-weight: bold;">手机:按键控制方向键</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import {useStore} from 'vuex'
    import $ from 'jquery'
    export default{
        name:'MatchGound',
        components: {
        },
        setup() {
            const store = useStore();
            let match_status = ref('开始匹配')
            let classes = ref('btn btn-info btn-lg')
            let bots = ref([]);
            let select_bot = ref("-1")
            let status_change = function () {
                if(match_status.value === '开始匹配'){
                    match_status.value = '取消匹配'
                    classes.value = 'btn btn-warning btn-lg'
                    store.state.pk.socket.send(JSON.stringify({
                        event:"start-matching",
                        bot_id:select_bot.value,
                    }))
                }else{
                    match_status.value = '开始匹配'
                    classes.value = 'btn btn-info btn-lg'
                    store.state.pk.socket.send(JSON.stringify({
                        event:"stop-matching",
                    }))
                }
            }
            const getBots = function(){
                $.ajax({
                    type: "post",
                    url: "https://xwjsnakebot.com.cn/api/user/bot/getBots/",
                    headers:{
                        Authorization:'Bearer '+store.state.user.token
                    },
                    success(resp){
                        bots.value = resp;
                    }
                });
            }
            getBots();//从云端动态获取bots
            return {
                match_status,
                status_change,
                classes,
                bots,
                select_bot
            }
        },
    }
</script>

<style scoped>
    .user_phote > img{
        border-radius: 50%;
    }
    div.matchground{
        width: 60vw;
        height: 70vh;
        margin: 20px auto;
        background-color: rgba(50, 50, 50, 0.4);
    }
    .introduce{
        display: none;
    }
    .user_phote{
        padding-top: 35%;
        text-align: center;
    }
    .user_name{
        color: rgb(241, 245, 249);
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        padding-top: 10px;
    }
    .mid_text{
        color: white;
        text-align: center;
        padding-top: 20%;
    }
    .match_button{
        text-align: center;
    }
    button{
        width: 150px;
    }
    @media screen and (max-width: 430px) and (min-width: 300px) {
        div.matchground{
            width: 95vw;
            height: 30vh;
            margin: 20px auto;
            background-color: rgba(74, 74, 72, 0.3);
            border: 2px solid rgb(138, 136, 136);
        }
        .introduce{
            display: block;
            width: 95vw;
            height: 30vh;
            margin: 30px auto;
        }
        .user_phote{
            padding-top: 25%;
            text-align: center;
        }
        .user_name{
            color: rgb(241, 245, 249);
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            padding-top: 10px;
        }
        .mid_text{
            color: white;
            text-align: center;
            padding-top: 13%;
        }
        .mid_text select{
            font-size: 12px;
        }
        button{
            width: 90px;
            font-size: 13px;
        }
    }
    @media screen and (max-width: 550px) and (min-width: 430px) {
        div.matchground{
            width: 95vw;
            height: 35vh;
            margin: 20px auto;
            background-color: rgba(50, 50, 50, 0.4);
        }
        .user_phote{
            padding-top: 25%;
            text-align: center;
        }
        .introduce{
            display: block;
            width: 95vw;
            height: 30vh;
            margin: 30px auto;
        }
        .user_name{
            color: rgb(241, 245, 249);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding-top: 10px;
        }
        .mid_text{
            color: white;
            text-align: center;
            padding-top: 15%;
            font-size: 12px;
        }
        button{
            width: 90px;
            font-size: 13px;
        }
    }
    @media screen and (max-width: 900px) and (min-width: 550px) {
        div.matchground{
            width: 95vw;
            height: 50vh;
            margin: 20px auto;
            background-color: rgba(50, 50, 50, 0.4);
        }
        .user_phote{
            padding-top: 15%;
            text-align: center;
        }
        .user_name{
            color: rgb(241, 245, 249);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding-top: 10px;
        }
        .mid_text{
            color: white;
            text-align: center;
            padding-top: 15%;
        }
    }
    @media screen and (max-width: 1180px) and (min-width: 900px) {
        div.matchground{
            width: 95vw;
            height: 60vh;
            margin: 20px auto;
            background-color: rgba(50, 50, 50, 0.4);
        }
        .user_phote{
            padding-top: 15%;
            text-align: center;
        }
        .user_name{
            color: rgb(241, 245, 249);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding-top: 10px;
        }
        .mid_text{
            color: white;
            text-align: center;
            padding-top: 15%;
        }
    }
</style>